<template>
  <div>
    <p>
      时间<i style="width: 14px; display: inline-block"></i>
      <el-input
        type="text"
        v-model="year"
        placeholder="请输入   例：2022"
        style="width: 16%"
        @keyup.enter.native="search()"
      ></el-input>
      <el-button type="primary" @click="search()">查询</el-button>
    </p>
    <div class="title">
      <h4>{{ titletext }}</h4>
    </div>
    <div id="bar" class="chart"></div>
    <budget-table ref="budgetTable" :year="yeartable"></budget-table>
  </div>
</template>
  
<script>
import Util from "../../../../assets/js/util";
import { chart } from "@/api/financialManagement/budget";
import budgetTable from "./budgetTable.vue";
export default {
  components: { budgetTable },
  data() {
    return {
      year: "",
      yearsOption: [],
      firstYear: "",
      secondYear: "",
      titletext: "",
      tableData: [],
      yeartable: "",
    };
  },
  computed: {
    chartBar() {
      return this.$echarts.init(Util.getDom("bar"));
    },
  },
  methods: {
    getsum(data) {
      var sum = 0;
      for (let i = 0; i < data.length; i++) {
        sum += data[i];
      }
      return sum;
    },
    search() {
      if (this.year.length == 4) {
        this.getBar();
        this.yeartable = this.year;
      } else {
        return;
      }
    },
    getBar() {
      var params;
      if (!this.year) {
        let nowDate = new Date();
        params = nowDate.getFullYear() + "";
      } else {
        params = this.year + "";
      }
      this.titletext = params + "年案件数量对比分析";
      chart(
        "date=" + params + "&qyid=" + Number(localStorage.getItem("companyId"))
      ).then((res) => {
        this.chartBar.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {},
          grid: {
            left: "8%",
            right: "2%",
            bottom: "5%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: [
                "一月份",
                "二月份",
                "三月份",
                "四月份",
                "五月份",
                "六月份",
                "七月份",
                "八月份",
                "九月份",
                "十月份",
                "十一月份",
                "十二月份",
              ],
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: res.data[0].name,
              type: "bar",
              stack: "sj",
              color: "#5470c6",
              emphasis: {
                focus: "series",
              },
              data: res.data[0].data,
            },
            {
              name: res.data[1].name,
              type: "bar",
              stack: "sj",
              color: "#91cc75",
              emphasis: {
                focus: "series",
              },
              data: res.data[1].data,
            },
            {
              name: res.data[2].name,
              type: "bar",
              stack: "sj",
              color: "#fac858",
              emphasis: {
                focus: "series",
              },
              data: res.data[2].data,
            },
            {
              name: res.data[3].name,
              type: "bar",
              stack: "ys",
              color: "#54cccc",
              emphasis: {
                focus: "series",
              },
              data: res.data[3].data,
            },
            {
              name: res.data[4].name,
              type: "bar",
              stack: "ys",
              color: "#91cccc",
              emphasis: {
                focus: "series",
              },
              data: res.data[4].data,
            },
            {
              name: res.data[5].name,
              type: "bar",
              stack: "ys",
              color: "#facccc",
              emphasis: {
                focus: "series",
              },
              data: res.data[5].data,
            },
          ],
        });
      });
    },
  },

  mounted() {
    this.getBar();
    //this.getyears();
  },
};
</script>
  
<style scoped lang="less">
.chart {
  width: 96%;
  height: 600px;
  margin-top: 22px;
  border-radius: 10px;
  // background-color: #f5f5f5;
  box-shadow: 0 0 5px transparent;
  padding-top: 60px;

  &:hover {
    box-shadow: 0 0 5px #2eb3ff;
  }
}

.title {
  width: 96%;
  margin-top: 22px;
  text-align: center;
  position: absolute;
  top: 118px;
  z-index: 9999;
}
</style>